<template>
<div>
    <!-- <p>boo: {{ boo }}</p> -->
    <p>coo: {{ $attrs.coo }}</p>
    <p>attrs: {{ $attrs }}</p>
    <!-- <p>function: {{ $listeners }}</p> -->

    <!-- 孙子组件 -->
    <!-- v-on="$listeners" -->
    <fb v-bind="$attrs" v-on="$listeners"></fb>
</div>
</template>

<script>
import fb from '@/components/b.vue';
export default {
    data() {
        return {
            key: 'value'
        }
    },
    // props: [],
    // 1.在props没接收的情况下，输出是：
    // boo:
    // attrs: { "boo": "hello", "coo": "world" }

    // props: ['boo'],
    // 2.输出是：
    // boo: hello
    // attrs: { "coo": "world" }

    // 总结：由此可见
    // $attrs: 是没有被props注册的会在$attrs中以对象的形式显示出来。
    mounted() {
        // console.log(this.$listeners);
    },
    methods: {
        name() {

        }
    },
    components: {
        fb
    }

}
</script>

<style lang="scss" scoped>

</style>
